<template>
<!--  240×167-->
  <div id="login-slider">
<!--    验证码-->
    <Vcode :show="isShow" @success="success" @close="close" />
    <el-form
      :model="form"
      style="max-width: 70%"
      :rules="formRules"
    >
      <el-form-item prop="username">
        <el-input v-model="form.username" prefix-icon="el-icon-user" placeholder="请输入用户号"/>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round class="subBtn" @click="submit(form)">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
import $ from "jquery";
export default {
  name: "login",
  components:{Vcode},
  data(){
    const form = {
      username: '',
      password: ''
    }
    return {
      isShow: false,
      form,
      formRules:{
        username: [
          {required:true,message:'请输入正确的用户名',trigger:'blur'},  //没写则报错
          // {min: 3,max: 6,message: '长度在3到6之间',trigger:'blur'}    //写了则判断长度
        ],
        password: [
          {required: true,message: '请输入密码',trigger:'blur'}
        ]
      }
    }
  },
  mounted() {
    this.show();
  },
  methods:{
    submit(data) {
      let username_len = data.username.length;
      let password_len = data.password.length;
      if(username_len !== 0 && password_len !== 0){  //可以提交并显示验证码
        this.isShow = true;
      }else{
        this.$message({
          type: 'warning',
          message: '请按规则填写信息............................'
        })
      }
    },
    // 用户通过了验证
    success(msg) {
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
      // alert("提交了")
      localStorage.setItem("flag",'登陆了')
      // this.$router.push('/main')
      location.href='/main'
    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
      this.isShow = false;
      alert("不提交了")
    },
    show(){
      $("#login-slider").fadeOut(1,'swing');
      $("#login-slider").fadeIn(500,'swing');
    }
  }
}
</script>
<style>
.subBtn{
  width:100%;
}
</style>
